import React, { useEffect, useRef } from "react";
import * as echarts from "echarts";
import { Card, Row, Col } from "antd";
import "./homecss.css";

// 城市数据与颜色配置（保持与示例图一致）
const CITIES = ["北京", "上海", "广州", "贵阳"];
const CITY_COLORS = ["#1890ff", "#52c41a", "#faad14", "#EE6666"]; // 蓝、绿、黄、红

export default function Home() {
  // 折线图容器
  const lineChartRef = useRef<HTMLDivElement>(null);
  // 三个子图表容器
  const pieRef = useRef<HTMLDivElement>(null);
  const ringRef = useRef<HTMLDivElement>(null);
  const barRef = useRef<HTMLDivElement>(null);

  // 初始化折线图（顶部）
  useEffect(() => {
    if (lineChartRef.current) {
      const chart = echarts.init(lineChartRef.current);
      const option = {
        title: {
          text: "房源数量",
          left: "left"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: { type: "cross" }
        },
        legend: {
          data: ["房屋数量", "已出租", "未出租", "租客"],
          top: "5%"
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["一月份", "二月份", "三月份", "四月份", "五月份", "六月份", "七月份", "八月份", "九月份", "十月份", "十一月份", "十二月份"]
        },
        yAxis: { type: "value" },
        series: [
          { name: "房屋数量", type: "line", stack: "Total", data: [16, 8, 6, 4, 6, 4, 5, 3, 4, 1, 4, 5] },
          { name: "已出租", type: "line", stack: "Total", data: [6, 6, 6, 4, 10, 4, 5, 3, 4, 10, 4, 5] },
          { name: "未出租", type: "line", stack: "Total", data: [10, 2, 6, 4, 4, 4, 5, 3, 4, 10, 4, 5] },
          { name: "租客", type: "line", stack: "Total", data: [6, 6, 6, 4, 8, 4, 5, 20, 4, 5, 4, 5] }
        ],
      };
      chart.setOption(option);

      const handleResize = () => chart.resize();
      window.addEventListener("resize", handleResize);
      return () => {
        window.removeEventListener("resize", handleResize);
        chart.dispose();
      };
    }
  }, []);

  // 初始化房源数量饼图（左下）
  useEffect(() => {
    if (pieRef.current) {
      const chart = echarts.init(pieRef.current);
      const option = {
        title: { text: "房源数量", left: "center" },
        tooltip: { trigger: "item" },
        legend: {
          data: CITIES,
          bottom: 0,
          textStyle: { fontSize: 12 }
        },
        color: CITY_COLORS,
        series: [
          {
            type: "pie",
            radius: "70%",
            data: [
              { value: 20, name: "北京" },
              { value: 30, name: "上海" },
              { value: 40, name: "广州" },
              { value: 50, name: "贵阳" }
            ],
            emphasis: {
              itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: "rgba(0,0,0,0.5)" }
            },
            label: { show: true, formatter: "{b}" } // 显示城市名称标签
          }
        ],
        toolbox: {
          feature: { saveAsImage: {} },
          right: 10
        }
      };
      chart.setOption(option);

      const handleResize = () => chart.resize();
      window.addEventListener("resize", handleResize);
      return () => {
        window.removeEventListener("resize", handleResize);
        chart.dispose();
      };
    }
  }, []);

  // 初始化房源价格环形图（中下）
  useEffect(() => {
    if (ringRef.current) {
      const chart = echarts.init(ringRef.current);
      const option = {
        title: { text: "房源价格", left: "center" },
        tooltip: { trigger: "item" },
        legend: {
          data: CITIES,
          bottom: 0,
          textStyle: { fontSize: 12 }
        },
        color: CITY_COLORS,
        series: [
          {
            type: "pie",
            radius: ["40%", "70%"], // 环形内外半径
            data: [
              { value: 4000, name: "北京" },
              { value: 3000, name: "上海" },
              { value: 2000, name: "广州" },
              { value: 1000, name: "贵阳" }
            ],
            emphasis: {
              label: { show: true, fontSize: 15, fontWeight: "bold" }
            },
            label: { show: false },
            labelLine: { show: false }
          }
        ],
        toolbox: {
          feature: { saveAsImage: {} },
          right: 10
        }
      };
      chart.setOption(option);

      const handleResize = () => chart.resize();
      window.addEventListener("resize", handleResize);
      return () => {
        window.removeEventListener("resize", handleResize);
        chart.dispose();
      };
    }
  }, []);

  // 初始化季度柱状图（右下）
  useEffect(() => {
    if (barRef.current) {
      const chart = echarts.init(barRef.current);
      const option = {
        tooltip: { trigger: "axis", axisPointer: { type: "shadow" } },
        legend: {
          data: CITIES,
          top: 0,
          textStyle: { fontSize: 12 }
        },
        color: CITY_COLORS,
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [{ type: "category", data: ["一季度", "二季度", "三季度", "四季度"] }],
        yAxis: [{ type: "value" }],
        series: [
          { name: "北京", type: "bar", stack: "total", data: [100, 120, 110, 130] },
          { name: "上海", type: "bar", stack: "total", data: [200, 180, 190, 210] },
          { name: "广州", type: "bar", stack: "total", data: [250, 230, 240, 260] },
          { name: "贵阳", type: "bar", data: [862, 1018, 964, 1026] } // 贵阳为独立柱状
        ],
        toolbox: {
          feature: { saveAsImage: {} },
          right: 10
        }
      };
      chart.setOption(option);

      const handleResize = () => chart.resize();
      window.addEventListener("resize", handleResize);
      return () => {
        window.removeEventListener("resize", handleResize);
        chart.dispose();
      };
    }
  }, []);

  return (
    <div className="home-container">
      {/* 顶部折线图 */}
      <Card
        title="房源数量趋势"
        extra={
          <a href=" ">
            < img src="/src/views/img/xia.png" alt="下载" width="30px" height="30px" />
          </a >
        }
        style={{ marginBottom: 20 }}
      >
        <div
          ref={lineChartRef}
          style={{ width: "100%", height: "250px" }}
        />
      </Card>

      {/* 底部三个图表（并排展示） */}
      <Row gutter={[20, 20]}>
        {/* 房源数量饼图 */}
        <Col xs={24} sm={12} md={8}>
          <Card>
            <div
              ref={pieRef}
              style={{ width: "100%", height: "230px" }}
            />
          </Card>
        </Col>

        {/* 房源价格环形图 */}
        <Col xs={24} sm={12} md={8}>
          <Card>
            <div
              ref={ringRef}
              style={{ width: "100%", height: "230px" }}
            />
          </Card>
        </Col>

        {/* 季度柱状图 */}
        <Col xs={24} sm={12} md={8}>
          <Card>
            <div
              ref={barRef}
              style={{ width: "100%", height: "230px" }}
            />
          </Card>
        </Col>
      </Row>
    </div>
  );
}